<template>
	<view class="requestDemo_container">
		<!-- <view @click="scanCode">扫描二维码</view> -->
		
		<view class="menu">
			<uni-segmented-control :current="current" :values="menuValues" 
			@clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
		</view>
				
		<view class="layout">
			<view class="box" v-for="(item, index) in pets" :key="item._id">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">--{{item.author}}</view>
			</view>
		</view>
		
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>			
		</view>
		
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"

const pets = ref([
	// {"_id": 1, url: "https://img2.baidu.com/it/u=65919310,1657578877&fm=253", content: "Hello Kity", author: "张三"},
	// {"_id": 2, url: "https://img0.baidu.com/it/u=2951430961,642507065&fm=253", content: "Hello Kity", author: "王五"},
	// {"_id": 3, url: "https://img2.baidu.com/it/u=246599488,4280622744&fm=253", content: "Hello Kity", author: "王五"},
	// {"_id": 4, url: "https://img0.baidu.com/it/u=2025194967,3010527417&fm=253", content: "Hello Kity", author: "赵六"},
	// {"_id": 5, url: "https://img0.baidu.com/it/u=2902688815,3298773402&fm=253", content: "Hello Kity", author: "马七"},
]);
const current = ref(0)
const classify = [{key:"all",value:"全部"},{key:"dog",value:"狗狗"},{key:"cat",value:"猫猫"}]
const menuValues= computed(()=>classify.map(item=>item.value))

/**
 * 发送网络请求
*/
function getImages(){
	// 开启加载状态
	uni.showNavigationBarLoading()
	uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		data:{
			size:5,
			type:classify[current.value].key
		},
		header:{
			"access-key":"helloworld@qwer"
		}
	}).then(res=>{
		if(res.data.errCode===0){			
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value);
		}else if(res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none"
			})
		}		
	}).catch(err=>{		
		uni.showToast({
			title:"请求有误，请重新刷新",
			icon:"none"
		})
	}).finally(()=>{
		// 关闭加载状态
		uni.hideNavigationBarLoading();
		// 关闭下拉刷新
		uni.stopPullDownRefresh();
	})
}

// 调用获取图片信息的接口
getImages()


/**
 * 点击菜单
*/
const onClickItem=(e)=>{
	current.value = e.currentIndex	
	pets.value = []	
	getImages();
}


/**
 * 点击预览
*/
const onPreview = function (index){
	let urls = pets.value.map(item=>item.url);	
	uni.previewImage({
		current:index,
		urls
	}) 
}


/**
 * 下拉刷新
*/
onPullDownRefresh(()=>{
	pets.value = [];
	current.value = 0
	getImages();
})


/**
 * 触底加载更多
*/
onReachBottom(()=>{
	getImages();
})


/**
 * 点击刷新
*/
const onRefresh =function(){
	uni.startPullDownRefresh();
}


/**
 * 返回顶部
*/
const onTop = ()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}


function scanCode() {
      uni.scanCode({
        success: function (res) {
          console.log('扫描结果:', res.result);
          // 处理扫描结果，例如显示结果或者跳转到某个页面等
          uni.showModal({
            title: '扫描结果',
            content: res.result,
            showCancel: false
          });
        },
        fail: function (err) {
          console.error('扫描失败:', err);
        }
      });
    }
</script>

<style lang="scss" scoped>
.requestDemo_container {
	.menu{
		padding:50rpx 50rpx 0;
	}
	.layout{
		padding:50rpx;
		.box{
			margin-bottom:60rpx;
			box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
			border-radius: 15rpx;
			overflow: hidden;
			.pic{
				image{
					width: 100%;
				}
			}
			.text{
				padding:30rpx;
				color:#333;
				font-size: 36rpx;
			}
			.author{
				padding:0 30rpx 30rpx;
				text-align: right;
				color:#888;
				font-size: 28rpx;
			}
		}
	}
	.float{
		position: fixed;
		right:30rpx;
		bottom:80rpx;
		padding-bottom:env(safe-area-inset-bottom);
		.item{
			width: 90rpx;
			height: 90rpx;
			background: rgba(255,255,255,0.9);
			border-radius: 50%;
			margin-bottom:20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border:1px solid #eee;
		}
	} 
	.loadMore{
		padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx);
	}
}
</style>
 
